<template>
  <div id="screen">
    <div id="main">
      <div class="top">
        <h1>填表界面</h1>
        扫码：<input id="text" type="text" v-model="text" placeholder="光标定位后扫码获取文本" autofocus style="width:80%"/>
        <button @click="parseTable()">解析</button>
        <br/>
        <br/>
        <div class="bom">
          工号：<input type="text" :value="bomData.LACODSEQ" readonly>
          零件图号：<input type="text" :value="bomData.TY" readonly>
          零件名称：<input type="text" :value="bomData.REQUIRES" readonly>
          工序号/工序名称：<input type="text" :value="bomData.JYBZ" readonly>
          单件号：<input type="text" :value="bomData.SYMBOL" readonly>
        </div>

        <div>
          <table width="100%" class="table" id="tablevalue">
            <tr style="background-color: #d4e8f9;font-size: 14px;">
              <th>行号</th>
              <th>工序/工步</th>
              <th>检验性质</th>
              <th>检验内容</th>
              <th>符号</th>
              <th>专检字段</th>
              <th>最大值</th>
              <th>最小值</th>
              <!-- 用户填写 -->
              <th>测量值</th>
              <th>检验结果备注</th>
              <th>是否合格</th>
            </tr>
            <tr v-for="(item,index) in dataList" :key="item.ID">
              <td>{{ index + 1 }}</td>
              <td>{{ item.LACODSEQ }}</td>
              <td>{{ item.TY }}</td>
              <td>{{ item.REQUIRES }}</td>
              <td>{{ item.SYMBOL }}</td>
              <td>{{ item.JYBZ }}</td>
              <td>{{ item.MAXVAL }}</td>
              <td>{{ item.MINVAL }}</td>
              <!-- 填写 -->
              <td><input type="text" v-model="item.VAL"/></td>
              <td><input type="text" v-model="item.RESULT"/></td>
              <!-- <td><input type="text" v-model="item.AAA" /></td> -->
              <td>
                <!-- 单选框 -->
                <input type="radio" value="合格" v-model="item.AAA">合格
                <input type="radio" value="不合格" v-model="item.AAA">不合格
              </td>

            </tr>
          </table>
        </div>

        <button @click="generateQRcode()" style=" margin-top:1%;">生成二维码</button>
        <!-- <button @click="downloadE()">下载</button> -->
        <br/>
        <br/>
        <div id="qrcode" ref="qrcode"></div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'

export default {
  name: 'DataTable',
  data() {
    return {
      text: "",
      qrText: "",
      bomData: {
        "ID": "",
        "LACODSEQ": "", //工号
        "TY": "", //零件图号
        "REQUIRES": "", //零件名称
        "SYMBOL": "", //单件号
        "JYBZ": "", //工序号/工序名称
        "MAXVAL": "",
        "MINVAL": "",
        "VAL": "",
        "RESULT": "",
        "AAA": ""
      },
      dataList: [{
        "ID": "",
        "LACODSEQ": "", //工序/工步
        "TY": "", //检验性质：定量，0定性
        "REQUIRES": "", //检验内容
        "SYMBOL": "", //符号
        "JYBZ": "", //专检字段
        "MAXVAL": "", //最大值
        "MINVAL": "", //最小值
        // 下面字段需要用户填写
        "VAL": "", //测量值
        "RESULT": "", //检验结果备注
        "AAA": "" //是否合格
      }],
    }
  },
  methods: {
    parseTable() {
      var newDataList = JSON.parse(this.text);
      // Vue.set(app, "dataList", newDataList);
      this.bomData = newDataList[0];
      this.bomData.JYBZ = newDataList[1].LACODSEQ.split(":")[1];
      //获取newDataList[0]之外的其他数据
      // this.dataList = newDataList.shift();
      this.dataList = newDataList.slice(1);
      // alert(this.dataList[0]);
      console.log("dataList:" + this.dataList);


    },
    generateQRcode() {
      // 获取整个表格数据
      // let tableData = this.dataList;
      // alert(JSON.stringify(tableData));
      let tableData = this.dataList.map(item => {
        return {
          ID: item.ID,
          SYMBOL: item.SYMBOL,
          VAL: Number(item.VAL),
          RESULT: item.RESULT,
          AAA: item.AAA
        };
      });

      // 把零件信息bomData放到tableData[0]的位置返回
      let newBomData = {
        ID: this.bomData.LACODSEQ,
        SYMBOL: this.bomData.TY,
        VAL: this.bomData.REQUIRES,
        RESULT: this.bomData.JYBZ,
        AAA: this.bomData.SYMBOL
      };
      tableData.unshift(newBomData);

      // tableData.unshift(this.bomData);
      // 进行下面的操作，比如发送到后端或保存到本地
      // console.log(tableData);
      this.qrText = JSON.stringify(tableData);
      alert(this.qrText);
      // this.$nextTick 是 Vue.js 提供的一个方法，用于在 DOM 更新后执行回调函数
      this.$nextTick(function () {
        this.showQrcode();
      })
    },
    showQrcode() {
      document.getElementById("qrcode").innerHTML = "";
      var qrcode = new QRCode('qrcode', { // 第一个入参是组件id
        text: this.qrText, // 生成二维码的文本
        width: 300,
        height: 300,
        colorDark: '#000000', // 二维码色
        colorLight: '#ffffff', // 背景色
        correctLevel: QRCode.CorrectLevel.L // 容错等级L、M、Q、H，H是heigh，最高，所以二维码看起来很密
      })
    },

    // 点击下载app二维码
    // downloadE是一个按钮事件，点击按钮下载
    downloadE(name) {
      var canvasData = this.$refs.qrcode.getElementsByTagName('canvas')
      var a = document.createElement("a");
      var event = new MouseEvent("click"); // 创建一个单击事件
      a.href = canvasData[0].toDataURL("image/png");
      ;
      a.download = "drcQrcode";
      a.dispatchEvent(event); // 触发a的单击事件
    },
    // getBomNumber(str){
    // 	return str.split("：")[1];
    // }
  }
}
</script>

<style scoped>
.table {
  border: 1px solid #cad9ea;
  color: #666;
}

.table th {
  background-repeat: repeat-x;
  height: 30px;
}

.table td,
.table th {
  border: 1px solid #cad9ea;
  padding: 0 1em 0;
}

.table tr.alter {
  background-color: #f5fafe;
}

#qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 可选：设置 div 的宽高等样式 */
  /* width: 300px;
  height: 300px;
  background-color: lightgray; */
}

#screen {
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  /*background-color:rgb(228, 180, 180);*/
  /*overflow: hidden;  */
  /*overflow: auto;*/

}


@media screen and (orientation: portrait) {
  /*竖屏*/
  #main {
    position: absolute;
    width: 100vh;
    height: 100vw;
    top: 0;
    left: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: 0% 0%;
    /*border: 1px solid green;*/
    /*background: yellow;*/
  }

  .top {
    width: 100%;
    height: 60px;
    /*background: red;*/
  }
}

@media screen and (orientation: landscape) {
  /*手机开启横屏*/
  #main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /*border: 1px solid red;*/
    /*background:deepskyblue;*/

  }

  .top {
    width: 100%;
    height: 60px;
    /*background: lightskyblue;*/
  }
}
</style>
